<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <!-- 建筑体添加1，陆家嘴示例，没有根据高度显示不同有颜色 -->
    <!-- <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g";
        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false, //  隐藏默认的地图按钮，否则会影响新地图的加载
            terrainProvider: new Cesium.CesiumTerrainProvider({  // 加载地形数据，搜索 珠穆朗玛峰,查看山川地形效果
                url: Cesium.IonResource.fromAssetId(1),
                requestVertexNormals: true,   // 设置为true,可以增加法线，用于提高光照效果，
                requestWaterMask: true,   // 设置为true,可以增加水面特效
            }),
        });
        // 添加建筑物
        const tileset = viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
                url: Cesium.IonResource.fromAssetId(96188),
            })
        );
        // 添加相机信息，改变视口位置，否则开不到效果
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000), // 目的地位置设置到 陆家嘴
            orientation: {  // 设置相机视口的方向
                heading: Cesium.Math.toRadians(0),  // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
                pitch: Cesium.Math.toRadians(-90),  // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
                roll: 0   // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
            }
        })
        tileset.style = new Cesium.Cesium3DTileStyle({
            color:"color('blue',0.5)", // 颜色设置为蓝色，不透明度设置0.5
            show:true,
        })
    </script> -->


    <!-- 建筑体添加2 完整示例 纽约 -->
    <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g";
        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false, //  隐藏默认的地图按钮，否则会影响新地图的加载
            terrainProvider: new Cesium.CesiumTerrainProvider({  // 加载地形数据，搜索 珠穆朗玛峰,查看山川地形效果
                url: Cesium.IonResource.fromAssetId(1),
                requestVertexNormals: true,   // 设置为true,可以增加法线，用于提高光照效果，
                requestWaterMask: true,   // 设置为true,可以增加水面特效
            }),
        });
        // 添加建筑物
        const tileset = viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
                url: Cesium.IonResource.fromAssetId(75343),
            })
        );

        // 添加相机信息，改变视口位置，否则开不到效果
        viewer.camera.setView({
            destination: new Cesium.Cartesian3(1333597.291762958, -4667718.246269587, 4147626.344790953), // 目的地位置设置到 陆家嘴
            orientation: {  // 设置相机视口的方向
                heading: 0.8384333942956647,  // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
                pitch: -1.299766516859664,  // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
                roll: 0.0   // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
            }
        });
        tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Height} >= 300', "color('rgba(45,0,75,0.5)')"],
                    ['${Height} >= 200', "color('rgba(102, 71, 151)')"],
                    ['${Height} >= 100', "color('rgba(170, 162, 204)')"],
                    ['${Height} >= 50', "color('rgba(224, 226, 238)')"],
                    ['${Height} >= 25', "color('rgba(252, 230, 200)')"],
                    ['${Height} >= 10', "color('rgba(248, 176, 87)')"],
                    ['${Height} >= 5', "color('rgba(198, 106, 11)')"],
                    ['true', "color('rgba(127,59,8)')"],

                ]
            },
            show: '${Height} > 0',
            meta: {
                description: '"Building id ${id} has height ${Height}."'
            }
        })
    </script>
</body>

</html>